.main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--dialog-bg);
  color: var(--input-label-color);
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  
  & > .workbench {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  & .mdi-wrapper {
    background-color: var(--mdi-bg);
    height: 100%;
    width: 100%;
  }

  & .mdi-wrapper::before {
    content: "";
    background-color: var(--mdi-img-bg);
    background-image: url('../media/ic_bot_framework.svg');
    width: 100%;
    height: 100%;
    background-size: 50% 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    opacity: .2;
  }

  & .secondary-mdi {
    border-left: 1px solid var(--neutral-9);
  }
}
